
<style>
    #admin-add label {
        width: 150px;
        background-color: #dddddd;
    }

    .defDivMainBox {
        width: 740px;
        margin: 0 auto;
    }

    .defcenter {
        text-align: center;
    }

    .defDivImageBox {
        width: 240px;
        margin: 0 auto;
    }

    defImageBox {
        width: 240px;
        height: 340px;
        margin: 0 auto;
    }
</style>

<div class="layuimini-main" id="admin-add">

    <div class="layui-form layuimini-form  layui-form-pane defDivMainBox" lay-filter="people_edit_div_filter">
        <div class="layui-form-item">

            <div class="defDivImageBox layui-panel">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>人员照片</legend>
                    <div class="layui-form-item defImageBox defcenter" id="peopleImage">
                        <img class="defImageBox" id="showPeopleImg" src="/NoPIC.jpg" width="240">
                    </div>
                    <div class="layui-form-item defcenter">
                        <button type="button" class="layui-btn layui-btn-normal" id="btnSelectImage"><i class="layui-icon">&#xe67c;</i>选择</button>
                        <button type="button" class="layui-btn layui-btn-normal" id="btnDeleteImage"><i class="layui-icon">&#x1006;</i>删除</button>
                    </div>
                </fieldset>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label required">人员编号</label>
                <div class="layui-input-inline">
                    <input type="number" max="4294967295" min="1" maxlength="10" name="employeeID" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label required">人员姓名</label>
                <div class="layui-input-inline">
                    <input type="text" maxlength="30" name="employeeName" lay-verify="required" lay-reqtext="人员姓名不能为空" placeholder="请输入人员姓名" value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">IC卡号</label>
                <div class="layui-input-inline">
                    <input type="number" max="4294967295" min="1" maxlength="10" name="employeeIc" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-inline">
                    <input type="password" maxlength="8" autocomplete='off' name="employeePassword" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">人脸识别阈值</label>
                <div class="layui-input-inline">
                    <input type="number" max="99" min="0" maxlength="2" name="employeeShold" value="0" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">职务：</label>
                <div class="layui-input-inline">
                    <input type="text" maxlength="30" name="employeeJob" value="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" maxlength="30" name="employeePhone" value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">身份证信息</label>
                <div class="layui-input-inline">
                    <input type="text" maxlength="30" name="employeeIdentity" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">地址信息</label>
                <div class="layui-input-inline">
                    <input type="text" maxlength="30" name="employeeAddress" value="" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item defcenter">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn"><i class="layui-icon">&#xe605;</i>保存</button>
            <button class="layui-btn layui-btn-warm" id="BtnPeopleEditCancel"><i class="layui-icon">&#x1006;</i>取消</button>
        </div>
    </div>
</div>
<script src="/jsLib/UploadImage.js"></script>
<script>
    layui.use(['form', 'table', 'upload', 'faceAPI'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;
        var faceAPI = layui.faceAPI;
        var imageTool = ImageUtility();

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        faceAPI.PeopleAddPageResult = {};

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        var loadIndex = 0; 
        
        var imageStatus = "NULL";

        var upload = layui.upload;

        //选择照片
        var uploadInst = upload.render({
            elem: '#btnSelectImage' //绑定元素
            , url: '/upload/' //上传接口
            , auto: false
            , choose: function (obj) {
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();

                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {

                    /*图片压缩*/
                    var img = new Image();
                    img.onload = function () {

                        //图片加载完毕之后进行压缩
                        var data = imageTool.compressImage(img);

                        //console.log(data);
                        imageStatus = "path";
                        peopleImage = data;
                        /*查看大图*/
                        $('#peopleImage').find('img').remove();
                        $('#peopleImage').append('<img id="showPeopleImg" src="' + data.data + '" width="240px">');
                        //console.log($('#showPeopleImg'));
                        bindshowPeopleImgClick();

                    };
                    img.src = result;


                });
            }
        });

        function bindshowPeopleImgClick() {
            $('#showPeopleImg').on('click', function () {
                var idBar = '#showPeopleImg';
                var src = $(idBar)[0].src;
                //debugger;
                var width = $(idBar).width();
                var height = $(idBar).height();
                var scaleWH = width / height;
                var bigH = 800;
                var bigW = scaleWH * bigH;
                if (bigW > 1000) {
                    bigW = 1000;
                    bigH = bigW / scaleWH;
                } // 放大预览图片
                parent.layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 1,
                    shadeClose: true,
                    area: [bigW + 'px', bigH + 'px'], //宽高
                    content: '<img width="' + bigW + '" src="' + src + '" />'
                });
            });
        }
        bindshowPeopleImgClick();

        //保存
        form.on('submit(saveBtn)', function (data) {
            postdata = data.field;
            if (postdata.employeeIc == "") postdata.employeeIc = 0;
            if (postdata.employeeID == "") postdata.employeeID = 0;
            loadIndex = layer.load(1, { shade: [0.6, '#e2e2e2'] }); //0.1透明度的白色背景
            postdata.employeePhotoWay = imageStatus;
            if (imageStatus == "path") {
                //fromdata 方式提交

                var formData = imageTool.imageBase64ToFormData(showPeopleImg);
                formData.append("postdata", JSON.stringify(postdata));

                faceAPI.Ajax({
                    type: 'Post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    url: '/api/People/AddAndFile',
                    success: function (result) {
                        layer.close(loadIndex);
                        if (result.result == false) {
                            layer.alert(result.error, { icon: 2 });
                        }
                        else {
                            $.extend(result.content, postdata);
                            faceAPI.PeopleAddPageResult = result;

                            layer.close(parentIndex);
                        }
                    }
                });
            }
            else {
                //普通方式提交
                faceAPI.Ajax({
                    type: 'Post',
                    data: postdata,
                    url: '/api/People/Add',
                    success: function (result) {
                        layer.close(loadIndex);
                        if (result.result == false) {
                            layer.alert(result.error, { icon: 2 });
                        }
                        else {
                            $.extend(result.content, postdata);
                            faceAPI.PeopleAddPageResult = result;
                            layer.close(parentIndex);
                        }
                    }
                });
            }
            return false;
        });

        //取消操作，关闭窗口
        $('#BtnPeopleEditCancel').on('click', function () {
            faceAPI.PeopleEditPageResult.result = false;
            layer.close(parentIndex);
            return false;
        });

        //删除照片
        $('#btnDeleteImage').on('click', function () {
            $('#peopleImage').find('img').remove();
            $('#peopleImage').append('<img id="showPeopleImg" src="/NoPIC.jpg" width="240">');
            imageStatus = "Delete";
            peopleImage = null;
            return false;
        });





    });


</script>